<template>
  <div class="depart-tree">
    <a-spin tip="Loading..." :spinning="false" v-show="toggle">
      <a-input-search v-model="searchValue" style="margin-bottom: 1px" placeholder="请输入部门名称按回车进行搜索"
        @blur="loadDepart()" />
      <slot></slot>
      <a-empty v-if="treeData.length===0"></a-empty>
      <a-tree v-else class="my-depart-tree" v-model="checkedKeys" selectable @select="onSelect" :treeData="treeData"
        :load-data="onLoadData" :replaceFields="{children:'children', title:'name', key:'code' }">
        
      </a-tree>
    </a-spin>
    <!-- <div class="menu-fold" :style="!toggle?{top:'0'}:''">
      <a-tooltip v-model="visible" placement="top" :title="toggle?'收起':'展开'">
        <a-icon :type="toggle?'menu-fold':'menu-unfold'" @click="setToggle" />
      </a-tooltip>
    </div> -->
  </div>
</template>

<script>
  import {
    Empty
  } from 'ant-design-vue';
  import {
    pageNewMech
  } from '@/api/sjsk/legalAid/organize'
  import {
    getXzqhByCode,
    getXzqhList
  } from '@/api/api'
  export default {
    name: 'departTree',
    data() {
      return {
        treeData: [],
        autoExpandParent: true,
        expandedKeys: [],
        dataList: [],
        checkedKeys: [],
        checkedRows: [],
        searchValue: "",
        checkStrictly: true,
        toggle: true,
        visible: false,
        
      }
    },
    created() {
      this.getXzqh()

    },
    watch: {

    },
    computed: {

    },
    methods: {
      getXzqh(level = 1, parent) {
        getXzqhByCode({
          codeList: [460000000000]
        }).then((res) => {
          if (res.success) {
            this.treeData = res.result
            
          }
        })
      },
      onLoadData(treeNode) {
        return new Promise(resolve => {
          console.log('=======================')
          console.log(treeNode.dataRef)
          if (treeNode.dataRef.children) {
            resolve();
            return;
          }

          getXzqhList({
            level: treeNode.dataRef.level + 1,
            parent: treeNode.dataRef.code
          }).then((res) => {
            if (res.success) {
              console.log(res.result)
              treeNode.dataRef.children = res.result
              this.treeData = [...this.treeData];
              console.log(this.treeData)
              resolve()
            }
          })
        });
      },
      getOrganize() {
        pageNewMech({}).then(res => {
          const {
            result
          } = res
          this.psychologList = result || []
        })
      },
      onCheck() {},
      getSelect() {
        console.log(this.checkedKeys)
        return this.checkedKeys
      },
      onSelect(key, {
        node
      }) {
        this.$emit('select', node.dataRef)
      },
      onDetail(item) {
        this.$emit('detail-click', item)
      }
    }
  }
</script>
<style lang="less" scoped>
  .depart-tree {
    padding-bottom: 10px;
    min-height: 600px;
    margin: 6px;
    position: relative;

    .menu-fold {
      position: absolute;
      top: 42px;
      right: 4px;
    }

    // 限制部门选择树高度，避免部门太多时点击确定不便
    .my-depart-tree {
      height: calc(100vh - 120px);
      overflow-y: auto;
    }
  }
</style>
